<template>
	<view class="container">
		<view class="my-tam-header">
			<view class="top-bar">
				<view class="navbar" @tap="back">
					<image class="white-arrow-left"
						src="">
					</image>
					<view class="nav-title" style="color: rgb(255, 255, 255);">我的店铺</view>
		
				</view>
			</view>
			<view class="store-header">
				<view class="store-avatar">
					<image :src="shopData['shop_avatar']" class="store-avatar-img"></image>
				</view>
				<view class="store-name">
					<view class="store-store-name">{{shopData['shop_name']}}</view>
					<view class="store-store-tel">{{shopData['shop_phone']}}</view>
				</view>
			</view>
			<view class="store-box">
				<view class="store-box-list">
					<view class="store-box-list-number">{{storeData['order_statistics']['today_order_num']}}</view>
					<view class="store-box-list-text">今日订单数</view>
				</view>
				<view class="store-box-list">
					<view class="store-box-list-number">{{storeData['order_statistics']['today_paid_order_num']}}</view>
					<view class="store-box-list-text">今日已支付数</view>
				</view>
				<view class="store-box-list">
					<view class="store-box-list-number">{{storeData['order_statistics']['today_unpaid_order_num']}}</view>
					<view class="store-box-list-text">今日未支付数</view>
				</view>
				<view class="store-box-list">
					<view class="store-box-list-number">{{storeData['order_statistics']['today_refund_order_num']}}</view>
					<view class="store-box-list-text">退款单数</view>
				</view>
			</view>	
		</view>
		<view class="tui-content-box">
			<view class="tui-box tui-order-box tui-tool-box">
				<view class="tui-order-list">
					<view class="tui-order-item" @tap="href(1)">
						<view class="tui-icon-box">
							<image src="/static/images/shop/order.png" class="tui-order-icon"></image>
						</view>
						<view class="tui-tool-text">订单管理</view>
					</view>
					<view class="tui-order-item" @tap="href(4)">
						<view class="tui-icon-box">
							<image src="/static/images/shop/setting.png" class="tui-order-icon"></image>
							
						</view>
						<view class="tui-tool-text">店铺管理</view>
					</view>
					
					<view class="tui-order-item" @tap="href(3)">
						<view class="tui-icon-box">
							<image src="/static/images/shop/liushui.png" class="tui-order-icon"></image>
							
						</view>
						<view class="tui-tool-text">线下流水</view>
					</view>
					<view class="tui-order-item" @tap="href(8)">
						<view class="tui-icon-box">
							<image src="/static/images/shop/goods.png" class="tui-order-icon"></image>
							
						</view>
						<view class="tui-tool-text">商品管理</view>
					</view>
					
				</view>
			</view>
			<view class="tui-box tui-order-box tui-tool-box">
				<view class="tui-order-list">
					<view class="tui-order-item" @tap="href(5)">
						<view class="tui-icon-box">
							<image src="/static/images/shop/online.png" class="tui-order-icon"></image>
						</view>
						<view class="tui-tool-text">线下核销</view>
					</view>
					<view class="tui-order-item" @tap="href(6)">
						<view class="tui-icon-box">
							<image src="/static/images/shop/renzheng.png" class="tui-order-icon"></image>
						</view>
						<view class="tui-tool-text">微信商户</view>
					</view>
					<view class="tui-order-item" @tap="href(7)">
						<view class="tui-icon-box">
							<image src="/static/images/shop/upload.png" class="tui-order-icon"></image>
							
						</view>
						<view class="tui-tool-text">商品上传
						
						</view>
					</view>
					<view class="tui-order-item" @tap="href(2)">
						<view class="tui-icon-box">
							<image src="/static/images/shop/adm.png" class="tui-order-icon"></image>
						</view>
						<view class="tui-tool-text">商铺码</view>
					</view>
					
				</view>
			</view>
		
		</view>
		

		<view class="tui-content-box">
			<view class="yui-store-box">
				
					<view class="tui-cell-header">
						<view class="tui-cell-title">店铺数据</view>
					</view>
				
				<view class="yui-store-list tui-flex-wrap">
			        <view class="tui-tool-item" @tap="href(11)">
			        	
			        	<view class="yui-store-list-text">今日线上营业额</view>
						<view class="yui-store-list-number">{{storeData['turnover_statistics']['today_online_turnover']}}</view>
			        </view>
					<view class="tui-tool-item" @tap="href(11)">
						<view class="yui-store-list-text">今日线下营业额</view>
						<view class="yui-store-list-number">{{storeData['turnover_statistics']['today_offline_turnover']}}</view>
					</view>
					<view class="tui-tool-item" @tap="href(11)">
						<view class="yui-store-list-text">今日分佣</view>
						<view class="yui-store-list-number">{{storeData['turnover_statistics']['today_online_turnover']}}</view>
					</view>
				</view>
				<view class="yui-store-list tui-flex-wrap">
				    <view class="tui-tool-item" @tap="href(11)">
				    	<view class="yui-store-list-text">线上总营业额</view>
				    	<view class="yui-store-list-number">{{storeData['turnover_statistics']['online_total_turnover']}}</view>
				    </view>
					<view class="tui-tool-item" @tap="href(11)">
						<view class="yui-store-list-text">线下总营业额</view>
						<view class="yui-store-list-number">{{storeData['turnover_statistics']['offline_total_turnover']}}</view>
					</view>
					<view class="tui-tool-item" @tap="href(11)">
						<view class="yui-store-list-text">总分佣</view>
						<view class="yui-store-list-number">{{storeData['turnover_statistics']['today_online_turnover']}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
export default {
	data() {
		return {
			current: 0,
			
			hotSearch: [],
			banner: [],
			pageIndex: 1,
			loadding: false,
			pullUpOn: true,
			shopData:'',
			shopOrder:'',
			storeData:'',
		};
	},
	onShow() {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu();
		// #endif
		
		// #ifndef MP-WEIXIN
		this.tui.haslogin();
		if(this.tui.isLogin()){
			
		}
		// #endif
		this.init();
	},
	methods: {
		init(){
			let token = this.tui.getToken();
			let datas={
				token: token,
			};
			let result=this.tui.request('shop','post',datas,1000,1,'','shopInfo');
			Promise.resolve(result).then((value)=>{
			   if(value.code==200){
				   if(!value.data){
				   	 this.back();
				   }
			   	this.shopData=value.data;
				/* 更新缓存 */
				this.tui.setShopData(value.data);
			   }
			})
			let store=this.tui.request('shop','post',datas,1000,1,'','statistics');
			Promise.resolve(store).then((value)=>{
			   if(value.code==200){
			   	this.storeData=value.data;
			   }
			})
		},
		detail: function() {
			// uni.navigateTo({
			// 	url: '../productDetail/productDetail'
			// });
		},
		coupon() {
			uni.navigateTo({
				url: '../coupon/coupon'
			});
		},
		initNavigation(e) {
			this.opacity = e.opacity;
			this.top = e.top;
		},
		opacityChange(e) {
			this.opacity = e.opacity;
		},
		classify: function() {
			uni.navigateTo({
				url: '../classify/classify'
			});
		},
		more: function(e) {
			let key = e.currentTarget.dataset.key || '';
			uni.navigateTo({
				url: '../productList/productList?searchKey=' + key
			});
		},
		categorys: function(e) {
			uni.navigateTo({
				url: '../productList/productList?category_id=' + e
			});
		},
		search: function() {
			uni.navigateTo({
				url: '../search/search'
			});
		},
		back(){
			uni.switchTab({
				url: '/pages/my/my'
			})
		},
		href(page) {
			let url = "";
			switch (page) {
				case 1:
					url = "/pageschild/shop/shopOrder"
					break;
				case 2:
					url = "/pageschild/shop/inviteStoreCode"
					break;
				case 3:
					url = "/pageschild/shop/offlineRecorde"
					break;
				case 4:
					url = "/pageschild/shop/setting"
					break;
				case 5:
					url = "/pageschild/shop/offline"
					break;
				case 6:
					url = "/pageschild/shop/merchants"
					break;
				case 7:
					url = "/pageschild/shop/addGoods"
					break;
				case 8:
					url = "/pageschild/shop/goodsList"
					break;
				default:
					break;
			}
		
			if (url) {
				// #ifdef MP-WEIXIN
				if (page == 10) {
					this.tui.toast("请在公众号板块使用~");
					return;
				}
				// #endif
		
				uni.navigateTo({
					url: url
				})
			} else {
				this.tui.toast("功能尚未完善~")
			}
		},
	},
	onPullDownRefresh: function() {
		let loadData = JSON.parse(JSON.stringify(this.productList));
		loadData = loadData.splice(0, 10);
		this.productList = loadData;
		this.pageIndex = 1;
		this.pullUpOn = true;
		this.loadding = false;
		uni.stopPullDownRefresh();
	},
	onReachBottom: function() {
		if (!this.pullUpOn) return;
		this.loadding = true;
		if (this.pageIndex == 4) {
			this.loadding = false;
			this.pullUpOn = false;
		} else {
			let loadData = JSON.parse(JSON.stringify(this.productList));
			loadData = loadData.splice(0, 10);
			if (this.pageIndex == 1) {
				loadData = loadData.reverse();
			}
			this.productList = this.productList.concat(loadData);
			this.pageIndex = this.pageIndex + 1;
			this.loadding = false;
		}
	}
};
</script>
<style>
page {
	background-color: #f7f7f7;
}
.container {
	padding-bottom: 100rpx;
	color: #333;
}
.my-tam-header {
		border-bottom-left-radius: 4rpx;
		border-bottom-right-radius: 4rpx;
		height: 440rpx;
		background: url('/static/images/my/shop_bg.png') no-repeat;
		background-size:100%;
	}
	/* #ifdef APP-PLUS*/
	.top-bar {
		position: fixed;
		top: 40rpx;
		left: 0;
		width: 100%;
		z-index: 99;
	}
	
	/* #endif */
	/* #ifndef APP-PLUS */
	.top-bar {
		position: fixed;
		top: 0rpx;
		left: 0;
		width: 100%;
		z-index: 99;
	}
	
	/* #endif */
	.navbar {
		height: 44px;
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		position: relative;
	}
	.white-arrow-left {
		width: 8px;
		height: 16px;
		margin-left: 17px;
	}
/*tabbar*/
.tui-tabbar {
	width: 100%;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 99999;
	background: #fff;
	height: 100rpx;
	left: 0;
	bottom: 0;
	padding-bottom: env(safe-area-inset-bottom);
}
.nav-title {
		color: #000;
		position: absolute;
		font-size: 16px;
		/* font-weight: 600; */
		top: 13px;
		left: 50%;
		line-height: 17px;
		margin-left: -34px;
	}
.store-header{
	    margin-left: 40rpx;
		margin-top: 130rpx;
		display: flex;
		justify-content: left;
}
.store-avatar{
	width:110rpx;
	border-radius: 20rpx;
	background: #f00;
	height:110rpx;
}
.store-box{
	display: flex;
	margin-top:20rpx;
	font-size: 24rpx;
	color:#fff;
	justify-content: space-around;
}
.tui-content-box {
		width: 100%;
		padding: 0 30rpx;
		display: block;
		box-sizing: border-box;
		position: relative;
		border-radius: 20rpx;
	}
	.tui-order-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tui-tool-text {
		font-size: 26rpx;
	}
	
	.tui-order-icon {
		width: 60rpx;
		height: 60rpx;
		display: block;
	}
	.tui-order-box {
		/* height: 208rpx; */
		margin-bottom: 20rpx;
	}
.store-box-list{
	text-align: center;
}
.store-box-list-number{
	font-size:34rpx;
	
	line-height:60rpx;
	color:#fff;
}
.store-box-list-text{
	color:#fff
}
.tui-tool-box{
	margin-top: -60rpx;
	padding:26rpx;
	background: #fff;
	border-radius: 20rpx;
}
.tui-order-list {
		width: 100%;
		height: 134rpx;
		/* padding: 0 30rpx; */
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}
	.yui-store-list {
			width: 100%;
			padding: 30rpx 50rpx 0 50rpx;
			text-align: center;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	.tui-box{
		background: #fff;
		border-radius: 20rpx;
		padding:26rpx 0;
	}
	.yui-store-box{
		background: #fff;
		border-radius: 20rpx;
		padding:26rpx 0;
	}
	.tui-cell-title {
		font-size: 28rpx;
		line-height: 30rpx;
		padding-top: 0rpx;
		padding-left: 30rpx;
		font-weight: 600;
		color: #333;
	}
	.yui-store-list-text{
		font-size: 26rpx;
		color:#a6a6a6;
		line-height: 50rpx;
	}
.tui-icon-box{
	margin-bottom: 20rpx;
}
.store-avatar-img{
	width:100%;
	height:110rpx;
	border-radius: 20rpx;
	
}
.store-name{
	margin-left: 20rpx;
	color:#fff;
}
.store-store-name{
	font-size: 32rpx;
	margin-top: 8rpx;
	font-weight: bold;
}
.store-store-tel{
	font-size: 28rpx;
	color:#ebebeb;
	margin-top: 14rpx;
}
</style>
